.strikethrough {
  text-decoration: line-through;
}
.clear-afterdesc {
  clear:both;
}
/* http://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text */
.mirror {
  transform:scale(-1,1);
  -moz-transform:scale(-1,1);
  -o-transform:scale(-1,1);
  -webkit-transform:scale(-1,1);
  -ms-transform:scale(-1,1);
}

// modal background's missing in non-default themes without this. Works on the bootswatch site.
// No idea what's broken, but this fixes it.
.modal-backdrop {
  height:100%;
}

// based on https://stackoverflow.com/questions/19227496/scrollable-menu-with-bootstrap-3-menu-expanding-its-container-when-it-should-n
.scrollable-menu {
  height: auto;
  max-height: 220px;
  overflow-x: hidden;
}
.progress-bar {
  overflow-x: visible;
  white-space: nowrap;
  // outline. http://css-tricks.com/adding-stroke-to-web-text/
  //text-shadow: 1px 1px $brand-primary, -1px 1px $brand-primary, 1px -1px $brand-primary, -1px -1px $brand-primary;
  text-shadow: 1px 1px black, -1px 1px black, 1px -1px black, -1px -1px black, 1px 0px black, 0px 1px black, -1px 0px black, 0px -1px black;
  //text-stroke: 1px black;
  //-webkit-text-stroke: 1px black;
}
/*
  some themes (cosmo, paper, darkly) have tiny progress bar text. enlarge it.
*/
.theme-cosmo .progress, .theme-paper .progress, .theme-darkly .progress {
  height:20px;
}
.theme-cosmo .progress .progress-bar, .theme-paper .progress .progress-bar, .theme-darkly .progress .progress-bar {
  font-size:14px;
  line-height:20px;
}
/* this theme has some texting text in every progress bar. wtf? */
.theme-paper .progress .progress-bar:last-child:before {
  content: '';
}
/* http://stackoverflow.com/questions/2584138/css3-continuous-rotate-animation-just-like-a-loading-sundial */
@-webkit-keyframes animrotate {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
.animrotate {
  -webkit-animation: animrotate 1s infinite linear;
}

td.upgrade-indicator {
  width:2em;
}
td.upgrade-indicator + td {
  padding-left:0;
  margin-left:0;
}
td.upgrade-indicator, td.upgrade-indicator .glyphicon {
  padding-right:0;
  margin-right:0;
}
.unit-table td {
  white-space:nowrap;
}
.unit-table tr:first-child td {
  border:0;
}
.unit-table tr {
  cursor:pointer;
}
.unit-sidebar {
  width:100%;
  display:inline-block;
  position:relative;
}
.unit-sidebar .unit-count {
  position:absolute;
  top:0px;right:6px;
}
// a list-group + grid-row. padding/margins on these fight each other; fix it by hand.
.unit-list {
  margin-top: 10px;
}
.unit-list li.list-group-item.row {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

// next-nowrap is in the docs, but doesn't work.
.text-nowrap {
  white-space: nowrap;
}
// achievement notification ui
.achievealert {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
}
.achieve {
  text-align:center;
}
.achieve h3 {
  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
  padding-left:1em;
  padding-right:1em;
}
.achieveicon, .achievepoints {
  font-size:400%;
  font-weight:bold;
}
.achieveicon-xs, .achievepoints-xs {
  font-size:100%;
  font-weight:bold;
}
.achieveicon, .achieveicon-xs {
  position:absolute!important;left:15px!important;top:15px!important;
}
.achievepoints, .achievepoints-xs {
  position:absolute!important;right:15px!important;top:15px!important;
}
.achievedesc {
}
.achievetext {
  position:relative;
  margin-bottom: 0px;
}

// system-clock hack detection message
.nogutter {
  padding: 0;
}
.row.nogutter {
  margin-left: 0;
  margin-right: 0;
}

.cheater {
  color: red;
  font-weight:bold;
}

// unit names + counts must be exactly one line.
// https://github.com/erosson/swarm/issues/41
.unitgroup .badge {
  // float:right
  position:absolute;top:0;right:0;
  margin:10px 15px
}
.unitgroup .unitlabel {
  white-space:nowrap;
}
// they're not real links
.unitgroup a {
  cursor:pointer;
}
// animations from ng-if docs: https://docs.angularjs.org/api/ng/directive/ngIf
.animif.ng-enter, .animif.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
}

.animif.ng-enter,
.animif.ng-leave.ng-leave-active {
  opacity:0;
}

.animif.ng-leave,
.animif.ng-enter.ng-enter-active {
  opacity:1;
}

.statistics td.name {
  text-transform: capitalize;
  //text-align: right;
}
// changelog release dates. <h4>0.0.1<span>2009/09/09</span></h4>
.changelog h4 span {
  //@extend .small;
  font-size: 85%;
  //@extend .text-muted;
  color: #999;
  //@extend .pull-right;
  float: right!important;
}
.resetalert {
  color: red;
  font-weight: bold;
}
.envalert,
// override stupid navbar color
.envalert.navbar-brand {
  text-transform: uppercase;
  color: red;
  font-weight: bold;
}
h1, h2, h3, h4, h5, h6, .titlecase, .statistics dt, .statistics th {
  text-transform: capitalize;
}
input[type="number"] {
  width:4em;
}
button.unit-buy {
  border-radius:0.5em;
}
.costNotMet, li.costNotMet a {
  color:grey;
}
li.costNotMet {
  background:#ddd;
  border-radius:0.5em;
}
.unitgroup {
  border:1px solid black;
  border-radius:0.5em;
}


////////////////////////////
// builtins
////////////////////////////
.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* Space out content a bit */
body {
  /*padding-top: 20px;*/
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;

  /* Make the masthead heading the same height as the navigation */
  h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
  }
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;

  .btn {
    font-size: 21px;
    padding: 14px 24px;
  }
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;

  p + h4 {
    margin-top: 28px;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0;
    padding-right: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

/* https://docs.angularjs.org/api/ng/directive/ngCloak */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* opacity:0 doesn't appear, but it controls what tbody background:inherit gets */
.cfp-hotkeys table {
  background-color: rgba(255,255,255,0);
}
